<template>
    <div class="fourlevellinkage">
        <Select
            class="w-select"
            :clearable="!provinceStatus && !disabled"
            :value="Number(province)"
            :disabled="provinceStatus || disabled"
            v-if="!provinceStatus && !disabled"
            placeholder="省"
            @on-change="changeProvince"
        >
            <Option v-for="item in provinceList" :value="item.id" :key="item.id" style='text-align:center'>{{item.name}}</Option>
        </Select>
        <Select
            class="w-select"
            :clearable="!cityStatus && !disabled"
            :disabled="cityStatus || disabled"
            v-if="!cityStatus && !disabled"
            :value="Number(city)"
            placeholder="市"
            @on-change="changeCity"
        >
            <Option v-for="item in cityList" :value="item.id" :key="item.id" style='text-align:center'>{{item.name}}</Option>
        </Select>
        <Select
            class="w-select"
            :clearable="!areaStatus && !disabled"
            :disabled="areaStatus || disabled"
            v-if="!areaStatus && !disabled"
            :value="Number(area)"
            placeholder="区县"
            @on-change="changeArea"
        >
            <Option v-for="item in areaList" :value="item.id" :key="item.id" style='text-align:center'>{{item.name}}</Option>
        </Select>
    </div>
</template>
<script>
import cookie from "./../utils/cookie.js";
import api from "@/api/commonApi";
export default {
    data() {
        return {
            provinceList: [],
            cityList: [],
            areaList: [],
            provinceStatus: false,
            cityStatus: false,
            areaStatus: false
        };
    },
    props: {
        province: {
            default: null
        },
        city: {
            default: null
        },
        area: {
            default: null
        },
        isBack: {
            default: 1
        },
        disabled: {
            default: false
        },
        provinceStatus: String,
        cityStatus: String,
        areaStatus: String,
        jianguan: String,
    },
    created() {
        if(this.jianguan == 'JP' || this.jianguan == '222') {
            this.userIsYq = JSON.parse(true)
        }
        this.provinceList = this.$store.getters.getProvinceList;
        //实际上不管是那种分类的账号，都要先将省级列表查询出来
        if (this.isBack == 1) { // 首次加载页面而不是从其他页面返回的页面
            this.authConfig();
        }else if(this.isBack == 2){ //这是从其他页面返回的话，携带有默认值
            this.authConfig();
            this.provinceList = this.$store.getters.getProvinceList;
            if (this.province) {
                this.cityList = this.$store.getters.getCityList(this.province);
                if (this.city) {
                    this.areaList = this.$store.getters.getAreaList(this.city);
                }
            }
        }
    },
    methods: {
        changeProvince(val) {
            this.$emit("changeProvince", val);
            this.$emit("changeCity", null);
            this.$emit("changeArea", null);
            this.city = null;
            this.area = null;
            this.cityList = this.$store.getters.getCityList(val);
        },
        changeCity(val) {
            val = val ? val : null;
            this.$emit("changeCity", val);
            this.$emit("changeArea", null);
            this.area = null;
            this.areaList = this.$store.getters.getAreaList(val);
        },
        changeArea(val) {
            val = val ? val : null;
            this.$emit("changeArea", val);
        },
        authConfig() {
            this.identity = cookie.getCookie("idtt");
            this.identityCoding = cookie.getCookie("idttC");
            this.ownArea = JSON.parse(cookie.getCookie("ownArea"));
            if(!this.jianguan) {
                this.userIsYq = JSON.parse(cookie.getCookie("userIsYq"));
            }
            // 药企不需要有默认状态
            if (!this.userIsYq) {
                // 输入框默认状态配置
                if (this.ownArea.province) {
                    // this.provinceList.push(this.ownArea.province);
                    this.province = this.ownArea.province.id;
                    this.provinceStatus = true;
                }
                if (this.ownArea.city) {
                    // this.cityList.push(this.ownArea.city);
                    this.city = this.ownArea.city.id;
                    this.cityStatus = true;
                }
                if (this.ownArea.area) {
                    // this.areaList.push(this.ownArea.area);
                    this.area = this.ownArea.area.id;
                    this.areaStatus = true;
                }
                // 不同权限账户对应不同的默认状态
                this.cityList = this.$store.getters.getCityList(this.province) || [];
                this.areaList = this.$store.getters.getAreaList(this.city) || [];
                if (this.identity == 1) { // 超级管理员
                } else if (this.identity == 2) { // 省
                    this.$emit("changeProvince", this.province);
                } else if (this.identity == 3) { // 市
                    this.$emit("changeProvince", this.province);
                    this.$emit("changeCity", this.city);
                } else if (this.identity == 4) { // 区
                    var params = {};
                    params.provinceCode = parseInt(this.province);
                    params.cityCode = parseInt(this.city);
                    params.districtCode = parseInt(this.area);
                    this.$emit("changeProvince", this.province);
                    this.$emit("changeCity", this.city);
                    this.$emit("changeArea", this.area);
                }
            }
        }
    },
    watch: {
       province(val) {
            this.cityList = this.$store.getters.getCityList(val);
       },
       city(val) {
            this.areaList = this.$store.getters.getAreaList(val);
       }
    },
};
</script>
<style lang="less" scoped>
.fourlevellinkage {
    display: inline-block;
    .w-select {
        width: 100px;
    }
    .w-select-hos {
        width: 180px;
    }
}
</style>